第11回ホームページ勉強会
  
第54日目2022年12月08日






今回の勉強はグリッド伸縮型スライドショーです

 9か月ほど前の第32日目と第33日目の勉強回では『css だけで作る スライドショー・フォトギャラリー』というページの「3D回転スライドショー」と「テロップ入りスライドショー」を使ってみましたが、今回はグリッドサムネイル伸縮型フォトギャラリーを使ってみましょう。

 下記が、このフォトギャラリーのデータをダウンロードして、htmlとcssに適用したモデルの実施例です。マウスを写真に乗せると、その写真が拡大表示されます。

事前準備:
 予め、GridExpの様な名前のフォルダーをMy-HP内に作っておき、更にその中にimg或いはphotoの様な名前のフォルダーを作り、その中に600×600px(1:1)の写真16枚を入れておきます。 写真の名前は1.jpgから16.jpgです。

 上記グリッドサムネイル伸縮型フォトギャラリーからソースをダウンロードできますから、皆さんがhtmlファイルやcssファイルを作り、動作させてみてください。

htmlの必要最低限の基本形は下記ですから、これに
linkhtml本体等必要事項を追加します
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

 写真の保存されているフォルダーはソースを見ると、「wp-images/img10」になっていますから、皆さんはソースを表示して「編集」→「置換」でフォルダー名を「img」や「photo」に変更して下さい

 具体的には下記の文字列「wp-images/img10」のどれかを選択/反転させた後に 
<!-- テーブル(グリッド) -->
<div id="stage">
<!-- 行・行内に4つのセル(それぞれに写真) -->
<div id="row1" class="row">
<label for="r1" class="cell1"><img src="wp-images/img10/1.jpg" alt="" /></label>
<label for="r2" class="cell2"><img src="wp-images/img10/2.jpg" alt="" /></label>
<label for="r3" class="cell3"><img src="wp-images/img10/3.jpg" alt="" /></label>
<label for="r4" class="cell4"><img src="wp-images/img10/4.jpg" alt="" /></label>
</div>

 「編集」→「置換」をクリックすると下記の画面になりますから、置換後の文字列としてimgphotoと入力し、「すべて置換」をクリックし、変換後はで閉じる

htmlとcssの取扱方法の説明はここからご覧下さい

勉強会のホームページでの実施例はここからご覧下さい

 今日(12/08)の勉強会では、このグリッド伸縮型フォトギャラリーを2行2列の表の2行目でセルを結合した部分に入れ、表はセンタリングし、幅を600pxにしました。

 この状態のソースを下記に表示しますが、赤で示した部分が追加した部分で、青は意味が判らない✕の表示を消す「削除する行」です。
<html>
<head>
<link href="style.css" rel="stylesheet">
<title></title>
</head>
<body>
<table align="center" width="600">
<tr>
<td>タイトル</td>
<td>戻る</td>
</tr>
<tr>
<td colspan="2">

<div id="container">
<input id="r1" type="radio" name="gal">
<input id="r2" type="radio" name="gal">
          :
       途中省略
          :
<label for="r15" class="cell3"><img src="img/15.jpg" alt="" /></label>
<label for="r16" class="cell4"><img src="img/16.jpg" alt="" /></label>
</div>
</div>
<!-- 閉じるボタン -->
<div id="close_btn"><label for="r20">×</label></div>

</div>
</td>
</tr>
</table>

</body>
</html>

この追加した結果はここからご覧下さい

 
2022-12-08 資料最終改訂:三宅 節雄